<?php
use frontend\modules\yii2\widgets\layouts\markdown\Markdown;
use frontend\modules\yii2\widgets\layouts\example\Example;

$this->title = 'Nav Widget Yii-Bootstrap导航菜单使用教程和样式展示';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => 'nav,Yii,bootstrap3,widget,导航菜单,使用教程,演示'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Yii的bootstrap系列小部件中导航菜单小部件nav的使用教程及演示'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);


$html = [
    "markdown0" => <<<M0
## 导航条（NavBar）
导航条可以认为是包含`Nav`小部件的容器，可以容纳`brand`（包括图片log和字符串）、左右两侧导航等，常用的示例如下：
M0,
    "example0" => [
        "html" =>
            \yii\bootstrap\NavBar::widget([
                "brandLabel" => "Yii",
                "brandUrl" => "bootstrap3#",
                "headerContent" =>  \yii\bootstrap\Nav::widget([
                    'options' => [
                        'class' => 'navbar-nav navbar-left'
                    ],
                    'items' => [
                        [
                            'label' => 'Home',
                            'url' => ['bootstrap3#'],
                        ],[
                            'label' => '入门',
                            'url' => ['bootstrap3#'],
                        ],[
                            'label' => '组件',
                            'url' => ['bootstrap3#'],
                        ],
                    ],
                ])
            ])
            .
            \yii\bootstrap\NavBar::widget([
                "brandLabel" => "Yii",
                "brandUrl" => "bootstrap3#",
                "options" => [
                    "class" => "navbar-inverse"
                ],
                "headerContent" =>  \yii\bootstrap\Nav::widget([
                    'options' => ['class' => 'navbar-nav navbar-left'],
                    'items' => [
                        [
                            'label' => 'Home',
                            'url' => ['bootstrap3#'],
                        ],[
                            'label' => '入门',
                            'url' => ['bootstrap3#'],
                        ],[
                            'label' => '组件',
                            'url' => ['bootstrap3#'],
                        ],
                    ],
                ])
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\NavBar;
use yii\bootstrap\Nav;
//白色调
echo NavBar::widget([
    "brandLabel" => "Yii",
    "brandUrl" => "bootstrap3#",
    "headerContent" =>  Nav::widget([
        'options' => [
            'class' => 'navbar-nav navbar-left'
        ],
        'items' => [
            [
                'label' => 'Home',
                'url' => ['bootstrap3#'],
            ],[
                'label' => '入门',
                'url' => ['bootstrap3#'],
            ],[
                'label' => '组件',
                'url' => ['bootstrap3#'],
            ],
        ],
    ])
]);
//反色 .navbar-inverse
echo NavBar::widget([
    "brandLabel" => "Yii",
    "brandUrl" => "bootstrap3#",
    "options" => [
        "class" => "navbar-inverse"
    ],
    "headerContent" =>  Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-left'],
        'items' => [
            [
                'label' => 'Home',
                'url' => ['bootstrap3#'],
            ],[
                'label' => '入门',
                'url' => ['bootstrap3#'],
            ],[
                'label' => '组件',
                'url' => ['bootstrap3#'],
            ],
        ],
    ])
]);
EY0,
        "bootstrap" => <<<EB0
<nav id="w1" class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="bootstrap3#">Yii</a>
            <ul id="w0" class="navbar-nav navbar-left nav">
                <li>
                    <a href="/yii2/bootstrap3#">Home</a>
                </li>
                <li>
                    <a href="/yii2/bootstrap3#">入门</a>
                </li>
                <li>
                    <a href="/yii2/bootstrap3#">组件</a>
                </li>
            </ul>
        </div>
        <div id="w1-collapse" class="collapse navbar-collapse">
        </div>
    </div>
</nav>

<!--反色调，和上述代码只有.navbar-inverse不一样-->
<nav id="w1" class="navbar-inverse navbar">
    ... ...
</nav>
EB0
    ],
    "markdown5" => <<<M0
## Logo
也可以为导航条添加`logo`，如下：
M0,
    "example5" => [
        "html" =>
            \yii\bootstrap\NavBar::widget([
                "brandImage" => "/images/logo.png",
                "brandOptions" => ["style" => ["width" => "80px", "margin-left" => "10px", "padding" => "0"]],
                "brandUrl" => "bootstrap3#",
                "options" => ["style" => "background-color: #2697ed"],
                "headerContent" =>  \yii\bootstrap\Nav::widget([
                    'options' => [
                        'class' => 'navbar-nav navbar-left',
                    ],
                    'items' => [
                        [
                            'label' => 'Home',
                            'url' => ['bootstrap3#'],
                            'linkOptions' => ['style' => 'color:white;']
                        ],[
                            'label' => '入门',
                            'url' => ['bootstrap3#'],
                            'linkOptions' => ['style' => 'color:white;']
                        ],[
                            'label' => '组件',
                            'url' => ['bootstrap3#'],
                            'linkOptions' => ['style' => 'color:white;']
                        ],
                    ],
                ])
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
echo NavBar::widget([
    "brandImage" => "/images/logo.png",
    "brandOptions" => [
        "style" => [
            "width" => "80px", 
            "margin-left" => "10px", 
            "padding" => "0"
        ]
    ],
    "brandUrl" => "bootstrap3#",
    "options" => [
        "style" => "background-color: #2697ed"
    ],
    "headerContent" => Nav::widget([
        'options' => [
            'class' => 'navbar-nav navbar-left',
        ],
        'items' => [
            [
                'label' => 'Home',
                'url' => ['bootstrap3#'],
                'linkOptions' => [
                    'style' => 'color:white;'
                ]
            ],[
                'label' => '入门',
                'url' => ['bootstrap3#'],
                'linkOptions' => [
                    'style' => 'color:white;'
                ]
            ],[
                'label' => '组件',
                'url' => ['bootstrap3#'],
                'linkOptions' => [
                    'style' => 'color:white;'
                ]
            ],
        ],
    ])
]);
EY0,
        "bootstrap" => <<<EB0
<nav class="navbar navbar-default" style="background-color: #2697ed">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w5-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="bootstrap3#" style="width: 80px; margin-left: 10px;padding:0;">
                <img src="/images/logo.png" alt="">
            </a>
            <ul id="w4" class="navbar-nav navbar-left nav">
                <li>
                    <a href="/yii2/bootstrap3#" style="color:white;">Home</a>
                </li>
                <li>
                    <a href="/yii2/bootstrap3#" style="color:white;">入门</a>
                </li>
                <li>
                    <a href="/yii2/bootstrap3#" style="color:white;">组件</a>
                </li>
            </ul>
        </div>
        <div id="w5-collapse" class="collapse navbar-collapse">
        </div>
    </div>
</nav>
EB0
    ],

    "markdown6" => <<<M0
## 固定在顶部
通过 `.navbar-fixed-top` 类可以很容易实现让导航条固定在顶部，即使往下拉页面，导航条也不会消失，示例如下：
M0,
    "example6" => [
        "html" =>
            \yii\bootstrap\NavBar::widget([
                "brandLabel" => "Yii",
                "brandUrl" => "bootstrap3#",
                //"options" => ["class" => "navbar-fixed-top"],
                "headerContent" =>  \yii\bootstrap\Nav::widget([
                    'options' => [
                        'class' => 'navbar-nav navbar-left'
                    ],
                    'items' => [
                        [
                            'label' => 'Home',
                            'url' => ['bootstrap3#'],
                        ],[
                            'label' => '入门',
                            'url' => ['bootstrap3#'],
                        ],[
                            'label' => '组件',
                            'url' => ['bootstrap3#'],
                        ],
                    ],
                ])
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\NavBar;
use yii\bootstrap\Nav;
echo NavBar::widget([
    "brandLabel" => "Yii",
    "brandUrl" => "bootstrap3#",
    "options" => ["class" => "navbar-fixed-top"],
    "headerContent" =>  Nav::widget([
        'options' => [
            'class' => 'navbar-nav navbar-left'
        ],
        'items' => [
            [
                'label' => 'Home',
                'url' => ['bootstrap3#'],
            ],[
                'label' => '入门',
                'url' => ['bootstrap3#'],
            ],[
                'label' => '组件',
                'url' => ['bootstrap3#'],
            ],
        ],
    ])
]);
EY0,
        "bootstrap" => <<<EB0
<nav id="w1" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="bootstrap3#">Yii</a>
            <ul id="w0" class="navbar-nav navbar-left nav">
                <li>
                    <a href="/yii2/bootstrap3#">Home</a>
                </li>
                <li>
                    <a href="/yii2/bootstrap3#">入门</a>
                </li>
                <li>
                    <a href="/yii2/bootstrap3#">组件</a>
                </li>
            </ul>
        </div>
        <div id="w1-collapse" class="collapse navbar-collapse">
        </div>
    </div>
</nav>
EB0
    ],

    "markdown1" => <<<M0
> <span style="font-size: 20px;font-weight: 600">注意：</span>  
由于导航条会一直存在顶部，因此需要将页面正文向下偏移`70px`才能避免被导航条遮挡，一般采用如下策略：
```html
body { padding-top: 70px; }
```
M0,

    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210922162308.png)
### 属性
- `options`: array    
最外层的`nav`标签的属性，一般用于定制样式。
- `containerOptions`: array  
`nav`标签的第一个子元素的属性，一般是类为`.contaner`的`div`标签。
- `brandLabel`: string|bool  
品牌的字符，它和`brandImage`不能共存，以`brandImage`为高优先级显示；  
- `brandImage`: string|bool  
品牌的Logo图标，它和`brandLabel`不能共存，以`brandImage`为高优先级显示；  
- `brandUrl`: string|bool  
品牌的链接，一般是跳转到首页，这个字段会按照`\yii\helpers\Url::to()`来解析，如果赋值为`false`则会默认配置为首页；   
- `brandOptions`: array  
品牌的属性，一般是用于定制样式，所在的位置是包含`brandLabel`或者`brandImage`的最近一个`a`父标签。    
- `headerContent`: string  
一般用于放置`Nav`小部件，是导航的主体；  

M3



];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}